<template>
  <div class="environment-detail">
    <div class="header">
      <router-link to="/main/huanjing/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>申请详情</h2>
    </div>

    <div class="content" v-loading="loading">
      <el-card class="detail-card">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请编号">{{ detail.applyNo }}</el-descriptions-item>
          <el-descriptions-item label="申请类型">{{ getTypeText(detail.type) }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ detail.applicant }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ detail.phone }}</el-descriptions-item>
          <el-descriptions-item label="申请区域">{{ getLocationText(detail) }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ formatDate(detail.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="期望开始时间">{{ formatDate(detail.expectedStartTime) }}</el-descriptions-item>
          <el-descriptions-item label="期望结束时间">{{ formatDate(detail.expectedEndTime) }}</el-descriptions-item>
          <el-descriptions-item label="具体要求" :span="2">{{ detail.requirements }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ detail.remarks || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="detail-card">
        <div slot="header">
          <span>处理信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusTag(detail.status)">
              {{ getStatusText(detail.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="处理人">{{ detail.handler || '待处理' }}</el-descriptions-item>
          <el-descriptions-item label="处理时间">{{ formatDate(detail.handleTime) || '待处理' }}</el-descriptions-item>
          <el-descriptions-item label="处理结果">{{ detail.handleResult || '待处理' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <div class="actions" v-if="canCancel">
        <el-button type="danger" @click="cancelApply">撤销申请</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnvironmentDetail',
  data() {
    return {
      loading: false,
      detail: {}
    }
  },
  computed: {
    canCancel() {
      return this.detail.status === 'pending'
    }
  },
  methods: {
    async fetchDetail() {
      try {
        this.loading = true
        const { type, id } = this.$route.params
        const response = await this.$http.get(`/api/environment/${type}/detail/${id}`)
        this.detail = response.data
      } catch (error) {
        // this.$message.error('获取详情失败')
      } finally {
        this.loading = false
      }
    },
    getTypeText(type) {
      const texts = {
        clean: '清洁',
        disinfect: '消杀',
        green: '绿化'
      }
      return texts[type] || type
    },
    getLocationText(detail) {
      if (detail.type === 'green') {
        return `${detail.area}-${detail.section}-${detail.spot}`
      }
      return `${detail.area}-${detail.floor}-${detail.room}`
    },
    getStatusTag(status) {
      const tags = {
        pending: '',
        processing: 'warning',
        completed: 'success',
        cancelled: 'info',
        rejected: 'danger'
      }
      return tags[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        pending: '待处理',
        processing: '处理中',
        completed: '已完成',
        cancelled: '已取消',
        rejected: '已拒绝'
      }
      return texts[status] || status
    },
    formatDate(date) {
      if (!date) return ''
      return new Date(date).toLocaleString()
    },
    async cancelApply() {
      try {
        await this.$confirm('确定要撤销该申请吗？')
        const { type, id } = this.$route.params
        await this.$http.post(`/api/environment/${type}/cancel/${id}`)
        this.$message.success('撤销成功')
        this.$router.push('/main/huanjing/process')
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('撤销失败')
        }
      }
    }
  },
  created() {
    this.fetchDetail()
  }
}
</script>

<style lang="scss" scoped>
.environment-detail {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    .detail-card {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .actions {
    margin-top: 20px;
    text-align: center;
  }
}
</style> 